<!--主题链接item-->
<template>
	<div class="topic-item" @click="toDetail">
		<el-text size="large">
			<el-icon><Connection /></el-icon>
			{{fierIcon}}{{data.title}}
		</el-text>

		<el-text style="color: #409EFF;">
			查看详情
			<el-icon><DArrowRight /></el-icon>
		</el-text>
	</div>
</template>
<script setup lang="ts">
import {defineProps, ref, computed} from 'vue'
import {useRouter} from 'vue-router'
const router = useRouter()
const props = defineProps({
	data: {
		type: Object,
		default: () => ({})
	},
	index: {
		type: Number,
		default: 0
	},
	showIcon: {
		type: Boolean,
		default: false
	}
})
const fierIcon = computed(()=> {
	if(!props.showIcon){
		return ' '
	}
	if(props.index > 2){
		return ' '
	}
	return ['🥇', '🥈', '🥉'][props.index]
})

const toDetail = ()=>{
	window.localStorage.setItem('topicDetail', JSON.stringify(props.data))
	router.push({
		path: `/topicdetail`
	})
}
</script>
<style scoped lang="scss">
.topic-item{
	width: 100%;
	height: 30px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
	border-radius: 4px;
	cursor: pointer;
	border-bottom: 1px dashed rgba(0,0,0,0.1);
	padding: 0 8px;
	&:hover{
		background: rgba(0,0,0,0.1);
		border:none;
	}
}
</style>
